<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/comment.css">
    <link rel="stylesheet" href="./css/about.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <a class="blog" href="#">我的个人博客 | 技术博客</a>
            <ul class="menu">
                <li><a href="/">首页</a></li>
                <li><a href="/map.html">地图</a></li>
                <li><a href="/about.html">关于</a></li>
                <li><a href="/comment.html">而言</a></li>
            </ul>
            <div class="search">
                <input type="text" placeholder="输入关键字查找">
                <button>搜索</button>
            </div>
        </div>
    </header>

    <div class="content">
        <div class="content_left">
            <div class="tip">
                <span>
                    欢迎灌水交流，别看我长时间不发博，博主可一直都在线~
                </span>
                <span>
                    友链只交换技术类个人博客，本博客稳定在线，所以也需要你的站尽量稳定。

不要皮，谢谢。
                </span>
                <span>
                    博主联系:MzcxNjA0Nzg1
                </span>
            </div>
            <div class="about_comment" id="blog_comments">
                <div class="comment_total">当前文章:目前有{{total}}条留言</div>
                <div class="comment" v-for="comment in commentList">
                    <div class="user">
                        <img class="avator" src="./img/avator.jpg" alt="">
                    <span>{{comment.user_name}}:{{comment.options}}发表于{{comment.ctime}}</span> <a style="cursor:pointer" @click="relay(comment.id, comment.user_name)">[回复]</a>  
                    </div>
                    <div class="comment_content">
                        {{comment.comments}}
                    </div>
                </div>
            </div>
            <div class="send_comment" id="send_comment">
                <span>发表评论</span>
                <div>
                    <input type="hidden" id="comment_replay" v-model="replay">
                    <input type="hidden" id="comment_replay_name" v-model="relay">
                    <input type="text" placeholder="昵称" id="comment_name" v-model="name">
                    <input type="text" placeholder="邮箱（评论被回复时你能收到通知）" id="comment_email" v-model="email">
                </div>
                <div>
                    <textarea placeholder="无意义的内容我可能不会回复你" id="comment_conent" v-model="content" cols="30" rows="10"></textarea>
                </div>
                <div>
                    <input type="text" placeholder="验证码" id="comment_code" v-model="codeVal">
                    <span v-html="codeImg" v-on:click="changeCode()"></span>
                </div>
                <button v-on:click="sendComment()">提交评论</button>
                <button>重写</button>
            </div>
        </div>
        <div class="content_right">
            <div class="right_module" id="random_tags">
                <div>随机标签名</div>
                <div class="tag">
                        <a :href="tag.link" v-for="tag in tags" v-bind:style="{color:randomColor(), fontSize:randomSize()}">{{ tag.text }}</a>
                </div>
            </div>
            <div class="right_module" id="new_hot">
                <div>热门文章</div>
                <ul>
                    <li v-for="temp in titleList">
                        <a :href="temp.link">{{temp.title}}</a>
                    </li>
                </ul>
            </div>
            <div class="right_module" id="new_comments">
                <div>最新评论</div>
                <ul>
                    <li v-for="temp in commentList">
                        <div>
                            <span>{{temp.username}}</span>
                            <span>{{temp.date}}</span>
                        </div>
                        <div class="coment">{{temp.content}}</div>
                    </li>
                </ul>
            </div>
            <div class="right_module">
                <div>友情链接</div>
                <span><a href="#">Skymoon</a></span><span><a href="#">Skymoon</a></span>
                <span><a href="#">Skymoon</a></span><span><a href="#">Skymoon</a></span>
                <span><a href="#">Skymoon</a></span><span><a href="#">Skymoon</a></span>
            </div>
        </div>
    </div>
    <footer>
        <ul>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">linux</a></li>
        </ul>
        <div>Copyright © 2010-2020 <a href="#">Eric个人博客</a> All rights reserved. 由免费开源的WordPress强力驱动. 鲁ICP备14017955号站长统计</div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/base.js"></script>
    <script src="./js/comment.js"></script>
</body>
</html>